import React, { Component } from 'react'
import { Spin, Upload, message } from 'antd'
import Avatar from '@/components/viewWidget/Avatar'
import { post } from '@/utils/requestUtil'
import { getContext } from '@/context/common/applicationContext'
import './index.css'
import FormWidget from '@/components/basicWidget/FormWidget'

/**
 * @author liu_jshan
 * @version 1.0
 * @Date 2024-02-19
 * 用户基本信息页面
 */
class UserBasicInfo extends Component {

    constructor(props) {
        super(props)
        this.state = {
            loading: true,
            user: null,
            avatarKey: new Date().getTime() + ''
        }
    }

    async componentDidMount() {
        let user = this.props.user
        await new Promise(resolve => { this.setState({ user }, resolve) })
        if (user) await new Promise(resolve => { this.setState({ loading: false }, resolve) })
    }

    onFileUploadChange = async (info) => {
        if (info.file.status === 'done') {
            //上传成功之后更新user信息
            await new Promise(resolve => {
                this.setState(preState => {
                    return {
                        user: {
                            ...preState.user,
                            avatarUrl: info.file.response.data
                        },
                        avatarKey: new Date().getTime() + ''
                    }
                }, resolve)
            })
            message.success('上传成功')
        } else if (info.file.status === 'error') {
            message.error(`上传失败: ${info.file.response.message}`)
        }
    }

    saveCustomerInfo = async () => {
        const response = await post('/customer/save', { body: JSON.stringify({
            ...this.state.user,
            ...this.editFormRef.state.formData,
            avatarUrl: this.state.user.avatarUrl
        })})
        if (response) {
            await new Promise(resolve => {
                this.setState({ user: response.data }, resolve)
            })
            //通知最外层更新user信息
            await this.props.updateUserInfo(response.data)
            message.success('保存成功')
        }
    }

    //输入框变化获取值(通过value)
    // onChangeByValue = (inputName) => {
    //     return async (value) => {
    //         const { user } = this.state
    //         await new Promise((resolve) => {
    //             this.setState({ user: { ...user, [inputName]: value } }, resolve)
    //         })
    //     }
    // }

    render() {
        if (this.state.loading === true) return <Spin />
        return (
            <div className='UserBasicInfo-main'>
                <div className='UserBasicInfo-main-top'>
                    <div className='UserBasicInfo-avatar'>
                        <Upload
                            headers={{ token: localStorage.getItem('token') }} //token放到请求头中
                            accept='image/*' //图片类型
                            action='/file/upload/headshot'
                            showUploadList={false} //隐藏上传列表
                            onChange={this.onFileUploadChange}
                        >
                            <Avatar
                                key={this.state.avatarKey}
                                src={this.state.user.avatarUrl}
                                alt='avatar'
                                onClick={() => {}}
                                isCircle={true}
                            ></Avatar>
                        </Upload>
                    </div>
                    <div className='UserBasicInfo-form'>
                        <FormWidget
                            code='customerBasicInfo'
                            initFormData={{...this.state.user}}
                            saveCustomerInfo={this.saveCustomerInfo}
                            ref={ref => this.editFormRef = ref}
                        ></FormWidget>
                    </div>
                </div>
            </div>
        )
    }
}

export default getContext(UserBasicInfo)